<template>
	<view class="container" v-if="isLoaded">
		<u-navbar :is-fixed="true" :custom-back="back" back-icon-color="#000" title="隐私设置" :background="{ backgroundColor: '#fff' }" title-color="#000"><!--  --></u-navbar>
		<view class="privacy-group">
			<u-cell-group title="向我显示">
				<u-cell-item style="padding-bottom: 0;" title="划一划匹配范围" :arrow="false" :border-bottom="false" hover-class="none" :value="distanceValue[1] > 100 ? '100km+' : distanceValue[1] + 'km'" :value-style="valueStyle"></u-cell-item>
				<u-cell-item style="padding-top: 0;" :arrow="false" hover-class="none">
					<view class="privacy-item-label" slot="title"><range-slider :step="10" :min="distanceRange[0]" :max="distanceRange[1]" :singleMode="true" :height="60" :width="686" v-model="distanceValue"></range-slider></view>
				</u-cell-item>
				<view @tap.stop="selectSex">
					<u-cell-item title="显示性别" :arrow="false">{{ sexText }}</u-cell-item>
				</view>
				<u-cell-item style="padding-bottom: 0;" title="年龄" :arrow="false" :border-bottom="false" :value="`${ageValue[0]} - ${ageValue[1]}`" :value-style="valueStyle"></u-cell-item>
				<u-cell-item style="padding-top: 0;" :arrow="false" hover-class="none">
					<view class="privacy-item-label" slot="title"><range-slider :min="ageRange[0]" :max="ageRange[1]" :height="60" :width="686" v-model="ageValue"></range-slider></view>
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import rangeSlider from '../components/range-slider/range-slider.vue';
export default {
	components: { rangeSlider },
	data() {
		return {
			ageRange: [],
			ageValue: [],
			distanceRange: [10, 110],
			distanceValue: [],
			valueStyle: {
				fontSize: '24rpx',
				color: '#4a4a4a',
				fontWeight: '700'
			},
			sexValue: -1,
			isLoaded: false
		};
	},
	computed: {
		sexText: function() {
			switch (this.sexValue) {
				case 1:
					return '男';
					break;
				case 2:
					return '女';
					break;
				default:
					return '全部';
					break;
			}
		}
	},
	onLoad() {
		this.initData();
		this.getScopeSetting();
	},
	methods: {
		back() {
			this.saveSetting(() => {
				Tools.showSuccess('保存成功', () => {
					this.navigateBack();
				});
			});
		},
		getScopeSetting() {
			this.$u.api.getScopeSetting().then(res => {
				const { age_scope } = res.data;
				this.ageRange = [Number(age_scope[0]), Number(age_scope[age_scope.length - 1])];
				this.initData();
			});
		},
		initData() {
			this.sexValue = this.userInfo.sex_scope;
			if (this.userInfo.age_scope < 0 && this.ageRange.length <= 0) {
				return false;
			}
			if (this.userInfo.age_scope < 0) {
				this.ageValue = this.ageRange;
			} else {
				this.ageValue = this.userInfo.age_scope.split(',').map(item => {
					return Number(item);
				});
			}
			if (this.userInfo.distance_scope < 0) {
				this.distanceValue = this.distanceRange;
			} else {
				this.distanceValue = [this.distanceRange[0], this.userInfo.distance_scope];
			}
			this.isLoaded = true;
		},
		selectSex() {
			uni.showActionSheet({
				itemList: ['全部', '男', '女'],
				success: res => {
					if (res.tapIndex == 0) {
						this.sexValue = 3;
					} else {
						this.sexValue = res.tapIndex;
					}
				}
			});
		},
		saveSetting(cb) {
			// distance,
			// age,
			// sex
			let distance = this.distanceValue[1];
			if (distance == this.distanceRange[1]) {
				distance = -1;
			}
			let age = this.ageValue.join(',');
			let sex = this.sexValue;
			this.$u.api.saveScopeSetting({ distance, age, sex }).then(res => {
				cb && cb();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.privacy-group {
	.privacy-group-title {
		padding: 0 30rpx 20rpx 30rpx;
		height: 128rpx;
		color: #9b9b9b;
		font-size: 30rpx;
		display: flex;
		align-items: flex-end;
	}
	.privacy-item-label {
		position: relative;
		width: 686rpx;
	}
}
</style>
